<template>
  <div class="app-container">
    <!-- 按钮 -->
    <el-button type="primary" size="small" @click="onclickRuzhiApply">入职申请</el-button>

    <!-- 说明 -->
    <!-- <span style="padding-left: 10px;">
      <el-tag type="warning" style="padding-left: 10px;">配置说明：删除某个部门时，必须保证下属部门和当前部门人数均为0！</el-tag>
    </span> -->
    <!-- {{list}} -->
    <div style="padding: 10px;" />

    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="状态" align="center" width="100px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sta==0 && scope.row.chexiao==0" type="warning">审核</el-tag>
          <el-tag v-if="scope.row.sta==1 && scope.row.chexiao==0" type="success">通过</el-tag>
          <el-tag v-if="scope.row.sta==2 && scope.row.chexiao==0" type="danger">拒绝</el-tag>
          <el-tag v-if="scope.row.chexiao==1" type="info">撤销</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="工号" align="center">
        <template slot-scope="scope">
          {{ scope.row.gonghao }}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column label="岗位" align="center">
        <template slot-scope="scope">
          {{ scope.row.position }}
        </template>
      </el-table-column>
      <el-table-column label="主管" align="center">
        <template slot-scope="scope">
          {{ scope.row.upper }}
        </template>
      </el-table-column>
      <el-table-column label="员工类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.leixing }}
        </template>
      </el-table-column>
      <el-table-column label="员工性质" align="center">
        <template slot-scope="scope">
          {{ scope.row.xingzhi }}
        </template>
      </el-table-column>
      <el-table-column label="入职时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.ruzhiDate }}
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          {{ scope.row.gender }}
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="seeDetail(scope.row.id)">详情 </el-button>
          <el-button v-if="scope.row.sta>0 && scope.row.chexiao == 0" size="mini" type="primary" plain @click="printPdf(scope.row.id)">生成PDF </el-button>
          <el-button v-if="(scope.row.chexiao == 0)" size="mini" type="danger" plain @click="revertApply(scope.$index)">撤回 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dataTotal"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <!-- 对话框 -->
    <el-dialog width="40%" :visible.sync="ruzhiApplyDialog.visible" top="5vh" center :show-close="false">
      <el-form ref="form" size="mini" label-position="left" label-width="100px">
        <el-row>
          <el-col :span="11">
            <div class="title"><i class="el-icon-document" /> 申请单</div>
            <el-form-item label="人员名称" required>
              <el-input v-model="ruzhiApplyDialog.name" />
            </el-form-item>
            <el-form-item label="工号">
              <el-input v-model="ruzhiApplyDialog.gonghao" type="number" />
            </el-form-item>

            <el-form-item label="电话">
              <el-input v-model="ruzhiApplyDialog.phone" />
            </el-form-item>

            <el-form-item label="邮件">
              <el-input v-model="ruzhiApplyDialog.email" />
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="ruzhiApplyDialog.gender" style="width: 100%;">
                <el-option label="未知" value="未知" />
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="员工性质">
              <el-select v-model="ruzhiApplyDialog.xingzhi" style="width: 100%;">
                <el-option label="在编人员" value="在编人员" />
                <el-option label="企业人员" value="企业人员" />
              </el-select>
            </el-form-item>
            <el-form-item label="员工类型">
              <el-select v-model="ruzhiApplyDialog.leixing" style="width: 100%;">
                <el-option label="无类型" value="无类型" />
                <el-option label="全职" value="全职" />
                <el-option label="兼职" value="兼职" />
                <el-option label="实习" value="实习" />
                <el-option label="劳务派遣" value="劳务派遣" />
                <el-option label="退休返聘" value="退休返聘" />
                <el-option label="劳务外包" value="劳务外包" />
              </el-select>
            </el-form-item>
            <el-form-item label="用人部门">
              <el-select v-model="ruzhiApplyDialog.department" style="width: 100%;" @change="departChange">
                <el-option v-for="(item1, idx) in departmentList" :key="item1.id" :label="item1.name" :value="idx" />
              </el-select>
            </el-form-item>

            <el-form-item label="员工岗位">
              <el-select v-model="ruzhiApplyDialog.position" style="width: 100%;">
                <el-option v-for="item2 in positionList" :key="item2.id" :label="item2.name" :value="item2.name" />
              </el-select>
            </el-form-item>

            <el-form-item label="上级主管">
              <el-cascader v-model="ruzhiApplyDialog.upper" :options="userList1" clearable style="width: 100%;" />
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker v-model="ruzhiApplyDialog.ruzhiDate" type="date" placeholder="选择入职日期" style="width: 100%;" />
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="ruzhiApplyDialog.remark" />
            </el-form-item>

          </el-col>

          <!-- 右侧 -->
          <el-col :span="11" :offset="2">
            <div class="title"><i class="el-icon-s-check" /> 审核流程</div>
            <div v-for="(item,index) in ruzhiApplyDialog.auditors" :key="index">
              <!-- 箭头：第一个不显示 -->
              <div v-if="index>0" class="step-arrow">
                <el-row>
                  <el-col :span="8">
                    <div><i class="el-icon-caret-bottom" /></div>
                  </el-col>
                </el-row>
              </div>
              <!-- 步骤样式 -->
              <div class="step">
                <el-row>
                  <el-col :span="8">
                    <div class="step-info-left">{{ item.stepName || item.positionName }}</div>
                  </el-col>
                  <el-col :span="16">
                    <div class="step-info-right">{{ item.name }}</div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="ruzhiApplyDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="ruzhiApply">申 请</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" width="60%" :visible.sync="detailDialog.visible" top="5vh">
      <ruzhi-detail :id="detailDialog.id" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="(detailDialog.visible = false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { websock } from '@/websock'
import { Message } from 'element-ui'
import { quchongAuditors } from '@/utils/utils'
import RuzhiDetail from '../../components/details/ruzhiDetail.vue'

export default {
  components: { RuzhiDetail },
  data() {
    return {
      departmentList: null,
      positionList: null,
      userList: [],
      userList1: [],
      list: [],
      pageIndex: 1,
      pageCount: 10,
      dataTotal: 0,
      listLoading: false,
      auditors: [],
      ruzhiApplyDialog: {
        visible: false,
        name: '',
        gonghao: '',
        department: '',
        position: '',
        leixing: '无类型',
        upper: [],
        xingzhi: '在编人员',
        gender: '未知',
        trialTime: '',
        ruzhiDate: '',
        phone: '',
        email: '',
        remark: '',
        auditors: []
      },
      detailDialog: {
        visible: false,
        id: 0
      }
    }
  },
  async created() {
    this.getApplyRecord()

    websock.getDepartList().then((data) => {
      this.departmentList = data
    })
    websock.getPosList().then((data) => {
      this.positionList = data
    })

    const res = await websock.getContactList()
    console.log('created', res)
    const userList = []
    for (let i = 0; i !== res.length; i++) {
      userList.push({ value: i + '', label: res[i].name, children: [] })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList[i].children.push({ value: res[i].userList[j].uid, label: res[i].userList[j].name })
      }
    }
    this.userList = userList

    const userList1 = []
    for (let i = 0; i !== res.length; i++) {
      userList1.push({ value: i + '', label: res[i].name, children: [] })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList1[i].children.push({ value: res[i].userList[j].name, label: res[i].userList[j].name })
      }
    }
    this.userList1 = userList1
    console.log('user list', this.userList1)

    this.auditors = await websock.getAuditors({ typ: 3 })

    this.getAuditors()
  },
  methods: {
    async getApplyRecord() {
      this.listLoading = true
      const data = await websock.entryApplyRecordWeb({
        pageIndex: this.pageIndex,
        pageCount: this.pageCount
      })
      this.listLoading = false
      this.list = data.list
      this.dataTotal = data.count
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.getApplyRecord()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.getApplyRecord()
    },
    gonghaoChange() {
      this.ruzhiApplyDialog.gonghao = parseInt(this.ruzhiApplyDialog.gonghao) + ''
    },
    departChange(e) {
      this.getAuditors()
    },
    // 获取审核人
    async getAuditors() {
      try {
        this.ruzhiApplyDialog.auditors = []
        const defaultAuditors = this.auditors.slice()
        for (let i = 0; i != defaultAuditors.length; i++) {
          if (defaultAuditors[i].sta == '1') {
            if (this.ruzhiApplyDialog.department === '') continue
            const departId = this.departmentList[this.ruzhiApplyDialog.department].id
            const lingdao = await websock.getDepartmentLingdao({ departId })
            if (lingdao.zhijie_lingdao) {
              this.ruzhiApplyDialog.auditors.push({ uid: lingdao.zhijie_lingdao, name: lingdao.zhijie_lingdao_name, positionName: lingdao.zhijie_lingdao_position_name })
            }
          } else if (defaultAuditors[i].sta == '0') {
            this.ruzhiApplyDialog.auditors.push(defaultAuditors[i])
          }
        }
        quchongAuditors(this.ruzhiApplyDialog.auditors)

        console.log('get auditors', this.ruzhiApplyDialog.auditors)
      } catch (err) {
        console.error(err)
        this.$message.error({ title: err.message || 'error' })
      }
    },
    onclickRuzhiApply() {
      this.ruzhiApplyDialog.visible = true
      this.ruzhiApplyDialog.name = '',
      this.ruzhiApplyDialog.department = '',
      this.ruzhiApplyDialog.position = '',
      this.ruzhiApplyDialog.leixing = '无类型',
      this.ruzhiApplyDialog.upper = [],
      this.ruzhiApplyDialog.xingzhi = '',
      this.ruzhiApplyDialog.gender = '未知',
      this.ruzhiApplyDialog.trialTime = '',
      this.ruzhiApplyDialog.ruzhiDate = '',
      this.ruzhiApplyDialog.phone = '',
      this.ruzhiApplyDialog.email = '',
      this.ruzhiApplyDialog.remark = '',
      this.ruzhiApplyDialog.auditors = []

      this.getAuditors()
    },
    async ruzhiApply() {
      console.log('ruzhi apply', this.ruzhiApplyDialog)

      if (!this.ruzhiApplyDialog.name) return Message({ message: '请输入名称', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.gonghao) return Message({ message: '请输入工号', type: 'error', duration: 3 * 1000 })
      if (this.ruzhiApplyDialog.department === '') return Message({ message: '请选择部门', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.position) return Message({ message: '请选择岗位', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.xingzhi) return Message({ message: '请选择员工性质', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.ruzhiDate) return Message({ message: '请选择入职时间', type: 'error', duration: 3 * 1000 })
      if (this.ruzhiApplyDialog.auditors.length == 0) return Message({ message: '请选择审核人员', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.phone) return Message({ message: '请输入手机号', type: 'error', duration: 3 * 1000 })
      if (!this.ruzhiApplyDialog.email) return Message({ message: '请输入邮箱', type: 'error', duration: 3 * 1000 })

      let upperName = ''
      if (this.ruzhiApplyDialog.upper.length != 0) {
        upperName = this.ruzhiApplyDialog.upper[1]
      }

      const auditors = []
      for (let i = 0; i != this.ruzhiApplyDialog.auditors.length; i++) {
        auditors.push({ uid: this.ruzhiApplyDialog.auditors[i].uid, stepName: this.ruzhiApplyDialog.auditors[i].stepName || this.ruzhiApplyDialog.auditors[i].positionName })
      }

      await websock.entryApply({
        name: this.ruzhiApplyDialog.name,
        gonghao: parseInt(this.ruzhiApplyDialog.gonghao),
        department: this.departmentList[this.ruzhiApplyDialog.department].name,
        position: this.ruzhiApplyDialog.position,
        ruzhiDate: this.ruzhiApplyDialog.ruzhiDate,
        trialTime: this.ruzhiApplyDialog.trialTime,
        phone: this.ruzhiApplyDialog.phone,
        email: this.ruzhiApplyDialog.email,
        gender: this.ruzhiApplyDialog.gender,
        upper: upperName,
        leixing: this.ruzhiApplyDialog.leixing,
        xingzhi: this.ruzhiApplyDialog.xingzhi,
        remark: this.ruzhiApplyDialog.remark,
        auditors
      })

      this.ruzhiApplyDialog.visible = false

      this.getApplyRecord()
    },
    async revertApply(idx) {
      try {
        await websock.revertEntryApply({ id: this.list[idx].id })
        this.list[idx].sta = 4
        this.getList()
      } catch (err) {
        console.error(err)
        this.$message.error({ title: err.message || 'error' })
      }
    },
    seeDetail(id) {
      this.detailDialog.visible = true
      this.detailDialog.id = id
    },
    printPdf(id) {
      websock.printPdf({ typ: 3, id }).then(res => {
        console.log('print pdf', res)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = res
        a.target = '_blank'
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../styles/form.css");
</style>
